<template>
	<view class="wui-lable scale-1" :style="[styleComputed]">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name:'w-label',
		props: {
			size: {
				type: String,
				default: 'default'
			},
			borderColor: {
				type: String,
				default: 'transparent'
			},
			backgroundColor: {
				type: String,
				default: 'transparent'
			},
			textColor: {
				type: String,
				default: '#34495e'
			}
		},
		computed: {
			styleComputed() {
				return {
					'--border-color': this.borderColor,
					'--background-color': this.backgroundColor,
					'--text-color': this.textColor
				}
			}
		}
	}
</script>

<style lang="scss" scoped>

	.wui-lable {
		color: var(--text-color);
		font-size: 24rpx;
		background-color: var(--background-color);
		display: inline-block;
		overflow: hidden;
		padding: 6rpx 22rpx;
		position: relative;
		border: none;
	}
	
	
	.wui-lable:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		border: 2rpx solid var(--border-color);
		box-sizing: border-box;
		width: 200%;
		height: 200%;
		transform: scale(0.5);
		transform-origin: left top;
	}
</style>
